<template>
    <div class="button-box">
        <el-button type="success" @click="lookRecommendList">商品推荐列表</el-button>
        <el-button type="danger" @click="lookSeckillList">商品秒杀列表</el-button>
    </div>
    <el-table :data="goodsList" style="width: 100%">
        <el-table-column prop="proid" label="商品编号" width="250" />
        <el-table-column prop="proname" label="商品名称" width="250" />
        <el-table-column prop="brand" label="品牌" width="100" />
        <el-table-column label="图片" width="200">
            <template #default="scope">
                <img class="img" :src="scope.row.img1">
            </template>
        </el-table-column>
        <el-table-column prop="originprice" label="商品价格" width="80" />
        <el-table-column prop="discount" label="商品折扣" width="80" />
        <el-table-column label="是否上架" width="80">
            <template #default="scope">
                <span>{{ scope.row.issale === 1 ? "已上架" : "未上架" }}</span>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import { ElMessage } from 'element-plus';
import { reactive, watch, ref } from 'vue'
import service from '../../../utils/service';

type TGood = {
    banner: string[],
    proid: string,
    brand: string,
    proname: string,
    originprice: number,
    sales: number,
    stock: number,
    desc: string,
    issale: number,
    isrecommend: number,
    discount: number,
    isseckill: number,
    img1: string
}
const goodsList = reactive<TGood[]>([])
// 封装发送请求
const getGoodsList = (category: string) => {
    service({
        url: `/pro/showdata`,
        method: "post",
        data: {
            type: category,
            flag: 1
        }

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            goodsList.length = 0
            goodsList.push(...res.data.data)
            if (goodsList.length == 0) {
                ElMessage({
                    showClose: true,
                    message: "没有商品，亲！！！",
                    type: "error"
                })
            }
        }
    })
}
const lookRecommendList = () => {
    getGoodsList("isseckill")
}
const lookSeckillList = () => {
    getGoodsList("isrecommend")
}


</script>

<style scoped>
.img {
    width: 200px;
    height: 180px;
}

.button-box {
    width: 300px;
    margin: 0 auto 15px;
}
</style>